Programmer Way | IT и фриланс

​​Svg в html.
Svg — разметка позволяющая создавать изображения, которые можно масштабировать без потери качества. Дизайнеры очень часто используют векторные иконки, логотипы и другие элементы дизайна на странице, так вот, как лучше взаимодействовать с данной разметкой? Есть несколько способов, выбирайте тот, который понравиться

1) При помощи отдельного файла, самый простой и понятный способ. Загружаете файл с форматом .svg из макета, помещаете в папку с картинками и через тег img выводите на станицу, но у этого способа есть явный недостаток — нельзя взаимодействовать с разметкой: нельзя поменять цвет, обводку, радиус и тд. Используйте этот вариант, если вам не нужно обращаться к svg, например если это какой-то элемент декора или иконка, которая статична, не имеет ховеров и не должна анимироваться 

2) Вставить svg прямо в разметку, все так же сохраняете изображение к себе на компьютер, открываете его через редактор и копируете содержимое, потом просто вставляете в разметку и получаете готовую икону, которую можно спокойно изменять, очень просто и удобно, но также имеет свои недостатки, например, если svg изображение очень большое и состоит из множеств элементом, то будет неудобно прописывать ему стили, а также разбираться в коде, если таких изображений много. Подойдёт в тех случаях, когда векторной графики на сайте не много, либо если у вас стоит задача детально работать с svg, добавлять различные анимации, следить за состоянием, изменять при помощи js и тд

3) Использование svg спрайтов. Этот способ решает проблему бессмысленного нагромождения кода, если коротко, то это одно большое svg, в котором через тег symbol вставлены другие svg. У каждого элемента есть id, с помощью которого и будет находиться нужное изображение, для этого используется еще один тег — use, где в параметре xlink:href нужно передать путь к файлу(если создали в отдельном файле) и id, пользоваться таким svg можно точно так же, как и обычным, добавлю видео с подробным объяснением svg спрайтов

4) Иконочный шрифт. Думаю здесь не надо подробностей, svg иконки используются как обычный шрифт и регулируются через свойства font-size и color. Очень удобно в использовании, но нужно подгружать дополнительный шрифт. А если вы захотите добавить еще одну иконку, то вам придется заново переустанавливать данный шрифт, будет отличным решением, когда вы уже знаете все иконки для проекта и хотите быстро менять их стили при наведении. Пользовался этим способом до недавнего времени, пока не перешел на спрайты, для спрайтов рекомендую еще настроить gulp сборку, чтобы она сама создавала файл со всеми иконками, а вы просто экспортировали их, если надо могу кинуть ссылку на подобную сборку

www.tg-me.com/jp/Programmer Way | IT и фриланс/com.ProgrammerwayIT/514

3.3K viewsMar 7, 2022 at 17:30

​​Svg в html.
Svg — разметка позволяющая создавать изображения, которые можно масштабировать без потери качества. Дизайнеры очень часто используют векторные иконки, логотипы и другие элементы дизайна на странице, так вот, как лучше взаимодействовать с данной разметкой? Есть несколько способов, выбирайте тот, который понравиться

1) При помощи отдельного файла, самый простой и понятный способ. Загружаете файл с форматом .svg из макета, помещаете в папку с картинками и через тег img выводите на станицу, но у этого способа есть явный недостаток — нельзя взаимодействовать с разметкой: нельзя поменять цвет, обводку, радиус и тд. Используйте этот вариант, если вам не нужно обращаться к svg, например если это какой-то элемент декора или иконка, которая статична, не имеет ховеров и не должна анимироваться 

2) Вставить svg прямо в разметку, все так же сохраняете изображение к себе на компьютер, открываете его через редактор и копируете содержимое, потом просто вставляете в разметку и получаете готовую икону, которую можно спокойно изменять, очень просто и удобно, но также имеет свои недостатки, например, если svg изображение очень большое и состоит из множеств элементом, то будет неудобно прописывать ему стили, а также разбираться в коде, если таких изображений много. Подойдёт в тех случаях, когда векторной графики на сайте не много, либо если у вас стоит задача детально работать с svg, добавлять различные анимации, следить за состоянием, изменять при помощи js и тд

3) Использование svg спрайтов. Этот способ решает проблему бессмысленного нагромождения кода, если коротко, то это одно большое svg, в котором через тег symbol вставлены другие svg. У каждого элемента есть id, с помощью которого и будет находиться нужное изображение, для этого используется еще один тег — use, где в параметре xlink:href нужно передать путь к файлу(если создали в отдельном файле) и id, пользоваться таким svg можно точно так же, как и обычным, добавлю видео с подробным объяснением svg спрайтов

4) Иконочный шрифт. Думаю здесь не надо подробностей, svg иконки используются как обычный шрифт и регулируются через свойства font-size и color. Очень удобно в использовании, но нужно подгружать дополнительный шрифт. А если вы захотите добавить еще одну иконку, то вам придется заново переустанавливать данный шрифт, будет отличным решением, когда вы уже знаете все иконки для проекта и хотите быстро менять их стили при наведении. Пользовался этим способом до недавнего времени, пока не перешел на спрайты, для спрайтов рекомендую еще настроить gulp сборку, чтобы она сама создавала файл со всеми иконками, а вы просто экспортировали их, если надо могу кинуть ссылку на подобную сборку

BY Programmer Way | IT и фриланс